<template>
  
  <el-table :data="tableData" max-height="250">
    <slot >

    </slot>

  </el-table>

  <el-pagination
    v-if="isShowPagination"
    class="ym-pagination"
    :total="total"
    layout="total, prev, pager, next, sizes"
    @current-change="changePage"
    @size-change="changePageSize"
    :page-size="pageSizes[0]"
    :page-sizes="pageSizes"
    >
  </el-pagination>
 
</template>
<script setup>

let { tableData, total, pageSizes} = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  total: {
    type: Number,
    default: 0
  },
  pageSizes: {
    type: Array,
    default: () => { return [10, 20, 50] }
  },
  isShowPagination: {
    type: Boolean,
    default: true
  }
})




let emit = defineEmits(['getPage'])

let pageParams = {
  page: 1,
  pageSize: pageSizes[0]
}

const changePage = (val) => {
  pageParams.page = val
  emit('getPage', pageParams)
}

const changePageSize = (val) => {
  pageParams.pageSize = val
  emit('getPage', pageParams)
}



</script>

<style lang="scss" scoped>
.ym-pagination {
  position: relative;
}
</style>

